<template>
    <!-- 深色的分享按钮 -->
    <div class="share-dark-component-container">
        <div class="share-dark-component-logo">
            <img src="../assets/images/yf.png"/>
        </div>
        <div class="share-dark-component-info">
            <div class="share-dark-component-title">{{ title }}</div>
            <div class="share-dark-component-inst">{{ inst }}</div>
        </div>
        <div class="share-dark-component-close" @click="fn()">×</div>
        <div class="share-dark-component-btn" @click="callApp()">打开</div>
        <div class="clearBoth"></div>
    </div>
</template>

<script>
    import Wakeup from "../assets/libs/func/callapp.js"

    export default {
        components: {
            Wakeup
        },
        props: {
            title: {
                type: String,
                default: "扬帆"
            },
            inst: {
                type: String,
                default: "直播扬州,订阅内容"
            },
            wakeupParam: {
                type: Object,
                default: function () {
                    return {
                        contentType: 6,
                        contentParam: "",
                        infoParams:{}
                    }
                }
            }
        },
        methods: {
            fn: function () {
                this.$emit("close", false);
                this.$emit("change", false);    // 直接显示灰色遮罩层
                if(this.$route.name=="Show"){
                    $(".edit-component-container").css('cssText','bottom:0 !important');
                }
                if(this.$route.name=="Live"){
                    $(".edit-component-container").css("bottom","0");
                    $(".edit-takeup").css("height","3.8rem");
                    $("#live_hall_container").css("padding-bottom","0");
                }
            },
            callApp: function () {
             //  console.log(JSON.stringify(this.wakeupParam, undefined, 2));
                openDownPage(this.wakeupParam.contentType, this.wakeupParam.contentParam,this.wakeupParam.infoParams);
            }
        }
    }
</script>

<style>
    .share-dark-component-container {
        width: 100%;
        background-color: rgba(0,0,0,0.75);
        color: #FFF;
        padding: 0.3rem 1.0rem;
        padding-right:0.3rem;
        box-sizing: border-box;
    }

    .share-dark-component-logo {
        width: 16%;
        float: left;
    }

    .share-dark-component-logo img {
        width: 2.5rem;
        height: 2.5rem;
    }

    .share-dark-component-info {
        width: 45%;
        float: left;
    }

    .share-dark-component-title {
        font-size: 1.0rem;
        line-height: 1.5rem;
    }

    .share-dark-component-info {
        font-size: 0.625rem;
        line-height: 1.0rem;
    }

    .share-dark-component-btn {
        float: right;
        font-size: 0.9rem;
        line-height: 1.5rem;
        margin-top: 0.5rem;
        background-color: #9852FF;
        padding: 0 0.9rem;
        text-align: center;
        border-radius: 0.95rem;
        margin-right: 10px;
    }

    .share-dark-component-close {
        width: 6%;
        float: right;
        text-align: right;
        font-size: 1.5rem;
        line-height: 2.5rem;
        margin-right: 5%;
    }
</style>